<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        boby{
            display: flex;
            justify-content: center; /* 水平居中 */
            align-items: center; /* 垂直居中 */
            margin: 0; /* 移除默认外边距 */
        }
        div{
            
            width: 200px;
            height: 200px;
            border: 2px solid black;
        }

        .div1_1{
            padding: 0;
            display: inline-block;
        }

        .div1_2{
            padding: 0;
            display: inline-block;
        }
        .div1_3{
           padding: 0;
           display: inline-block;
        }

        .item{
            float: left;
            width: 48%;
            height: 100%;
        }
        .div1_3 .td1_3_div1{
            width: 100%;
            height: 48%;
            background-color: rgb(221, 80, 106);
    
        }
        .div1_3 .td1_3_div2{
            width: 100%;
            height: 49%;
            background-color: rgb(119, 175, 135);

        }
        .div1_3 .td1_3_div3{
            float: right;
            width: 48%;
            height: 100%;
            background-color: rgba(86, 23, 77, 0.982);
            border-left: 2px solid black;

        }

        .div2_1{
            padding: 0;
            display: inline-block;
            box-sizing: border-box;
            width: 200px;
            height: 200px;
            margin: 0 auto;
            border-left: 100px solid transparent; /* 左侧透明边框 */
            border-right: 100px solid transparent; /* 右侧透明边框 */
            border-top: 200px solid rgb(159, 122, 89);
            
        }
        .div2_2{
            padding: 0;
            display: inline-block;
            box-sizing: border-box;
            width: 200px;
            height: 200px;
            margin: 0 auto;
            border-left: 100px solid transparent; /* 左侧透明边框 */
            border-right: 100px solid transparent; /* 右侧透明边框 */
            border-bottom: 200px solid rgb(255, 189, 113);
        }
        .div2_3{
            padding: 0;
            display: inline-block;
            box-sizing: border-box;
            width: 200px;
            height: 200px;
            margin: 0 auto;
            border-top: 100px solid transparent; /* 左侧透明边框 */
            border-bottom: 100px solid transparent; /* 右侧透明边框 */
            border-right: 200px solid rgb(101, 114, 255);
        }
        .div3_1{
            padding: 0;
            display: inline-block;
            box-sizing: border-box;
            width: 200px;
            height: 200px;
            margin: 0 auto;
            border-top: 100px solid transparent; /* 左侧透明边框 */
            border-bottom: 100px solid transparent; /* 右侧透明边框 */
            border-left: 200px solid rgb(169, 61, 84);
        }
        .div3_2{
            padding: 0;
            display: inline-block;
            box-sizing: border-box;
            width: 200px;
            height: 200px;
            margin: 0 auto;
            border-top: 100px solid pink ;
            border-bottom: 100px solid pink ;
            border-left: 100px solid rgba(255, 255, 124, 0.914) ;
            border-right: 100px solid rgba(209, 100, 182, 0.904) ;
        }
        .div3_3{
            padding: 0;
            display: inline-block;
            box-sizing: border-box;
            width: 200px;
            height: 200px;
            margin: 0 auto;
            border-top: 70px solid pink ;
            border-bottom: 70px solid pink ;
            border-left: 70px solid rgba(255, 255, 124, 0.914) ;
            border-right: 70px solid rgba(209, 100, 182, 0.904) ;
        }
        .item1{
            height: 32%;
            background-color: rgb(119, 175, 135);
        }
        .item2{
            height: 32%;
            background-color: rgba(86, 23, 77, 0.982);
        }
        .item3{
            height: 32%;
            background-color: rgb(221, 80, 106);
        }
        .image{
            background-image: url('../TableTeat/image/sample4.jpg');
            background-size: 95% 95%;
            border-radius: 50%;
        }
    </style>
</head>
<body>
        <div class="div1_1">
            <div class="item1"></div>
            <div class="item2"></div>
            <div class="item3"></div>
        </div><div class="div1_2"><div class="image"></div></div><div class="div1_3">
             <div class="item">
                <div class="td1_3_div1"></div>
                <div class="td1_3_div2"></div>
            </div>
            <div class="td1_3_div3"></div>
        </div>
        <br>
        <div class="div2_1"></div><div class="div2_2"></div><div class="div2_3"></div>
        <br>
        <div class="div3_1"></div><div class="div3_2"></div><div class="div3_3"></div>
</body>
</html>